<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.id" placeholder="房源id" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.city_id" placeholder="城市" clearable filterable style="width: 200px;margin-left: 10px" class="filter-item">
        <el-option
          v-for="item in cityList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >{{ item.name }}</el-option>
      </el-select>
      <el-input v-model="listQuery.neiborhood_id" placeholder="小区id" clearable style="width: 200px;margin-left: 10px" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.alias" placeholder="别名" clearable style="width: 200px;margin-left: 10px" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button class="filter-item" style="float:right;margin-right: 40px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>
      <el-button v-waves class="filter-item" style="float:right;margin-right: 20px;" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
    </div>
    <el-table></el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="城市" prop="city_id">
          <!--          <el-select v-model="temp.type" class="filter-item" placeholder="Please select">-->
          <!--            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />-->
          <!--          </el-select>-->
          <el-select v-model="temp.city_id" placeholder="请填选城市" clearable filterable class="filter-item">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="Date" prop="timestamp">-->
        <!--          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />-->
        <!--        </el-form-item>-->
        <el-form-item label="小区id" prop="neiborhood_id">
          <el-input v-model="temp.neiborhood_id" placeholder="请填小区id" />
        </el-form-item>
        <el-form-item label="别名" prop="alias">
          <el-input v-model="temp.alias" placeholder="请填写别名" />
        </el-form-item>
        <el-form-item label="均价" prop="pricing_persqm">
          <el-input v-model="temp.pricing_persqm" placeholder="请填写均价（单位：元）" />
        </el-form-item>
        <el-form-item label="总价" prop="pricing_sum">
          <el-input v-model="temp.pricing_sum" placeholder="请填写均价（单位：万元）" />
        </el-form-item>
        <el-form-item label="面积" prop="floor_squaremeter">
          <el-input v-model="temp.floor_squaremeter" placeholder="请填写均价（单位：平方米）" />
        </el-form-item>
        <el-form-item label="朝向" prop="toward">
          <el-input v-model="temp.toward" placeholder="请填写朝向，eg：南北" />
        </el-form-item>
        <el-form-item label="上架状态" prop="sale_status">
          <el-select v-model="temp.sale_status" class="filter-item" placeholder="请选择">
            <!--            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />-->
            <el-option
              v-for="item in saleStatusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >{{ item.name }}</el-option>
          </el-select>
        </el-form-item>

        <!--        <el-form-item label="Imp">-->
        <!--          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="描述" prop="sale_status">-->
        <!--          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入" />-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          保存
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'complex-table-old-house-show',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        id: undefined,
        city_id: undefined,
        neiborhood_id: undefined,
        alias: undefined,
        page: 1,
        limit: 10
        // importance: undefined,
        // type: undefined
        // sort: '+id'
      },
      importanceOptions: [1, 2, 3],
      calendarTypeOptions,
      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
      statusOptions: ['published', 'draft', 'deleted'],
      cityList: CITY_LIST,
      saleStatusList: [{ id: '1', name: '上架' }, { id: '-1', name: '下架' }],
      showReviewer: false,
      temp: {
        id: undefined
        // importance: 1,
        // remark: '',
        // timestamp: new Date(),
        // house_id: '',
        // type: '',
        // status: '0'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        city_id: [{ required: true, message: '城市是必填项', trigger: 'change' }],
        neiborhood_id: [{ required: true, message: '小区id是必填项', trigger: 'change' }]
      },
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      console.log(this.listQuery)
      oldHouseList(this.listQuery).then(response => {
        this.list = response.data.items.slice(0, 9)
        this.total = response.data.total
        console.log(response)

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          // this.temp.author = 'vue-element-admin'
          oldHouseCreate(this.temp).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
                title: 'Success',
                message: 'Created Successfully',
                type: 'success',
                duration: 2000
              }
            )
          })
        }
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          // tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          console.log(tempData)
          oldHouseModify(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    deleteData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          // tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          console.log(tempData)
          oldHouseModify(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
  }
}
</script>
